<template>
    <a-modal
        v-model:value="popShown"
        :clickBgToClose="false"
        :escToClose="false"
    >
        <div class="container c-p-m c-shadow-m c-round-m">
            <div class="c-font-size-xl title" v-html="title"></div>
            <div class="c-m-t-xl c-font-size-m" v-html="message"></div>
            <div class="c-m-t-xl c-f-h c-f-p-end">
                <a-button
                    color="secondary"
                    size="m"
                    class="c-shadow-m c-m-r-m"
                    @click="
                        $emit('confirm', false);
                        popShown = false;
                    "
                    >{{ cancelText || $t("AAlert.Cancel") }}</a-button
                >
                <a-button
                    color="primary"
                    size="m"
                    class="c-shadow-m"
                    @click="
                        $emit('confirm', true);
                        popShown = false;
                    "
                    >{{ confirmText || $t("AAlert.Confirm") }}</a-button
                >
            </div>
        </div>
    </a-modal>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.container {
    width: 400px;
    background-color: $defaultBgColor;

    & > .title {
        font-weight: 600;
    }
}
</style>

<script>
import AButton from './AButton.vue'
import AModal from './AModal.vue'

export default {
    name: 'AAlert',
    emits: ['confirm'],
    components: { AModal, AButton },
    props: {
        title: {
            type: String,
        },
        message: {
            type: String,
        },
        confirmText: {
            type: String,
        },
        cancelText: {
            type: String,
        }
    },
    data() {
        return {
            popShown: true
        }
    },
}
</script>